<template>
  <div class="song_list">
    <song-top :dataInfoList="dataInfoList" class="top"></song-top>
    <song-list
      :dataList="dataList"
      :subscribedCount="dataInfoList.subscribedCount"
      class="bottom"
    ></song-list>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, onBeforeMount, computed, ref, defineEmits } from 'vue'

import songTop from '@/components/home/songList/songTop.vue'
import songList from '@/components/home/songList/songList.vue'

import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

const emit = defineEmits(['musicInfo'])

const route = useRoute()
//当前路由名称songList
//通过路由传过来的歌单id
const id = route.query.id
//获取歌单详情信息
const payLoad = {
  id: id,
  pageName: '/playlist/detail'
}
// 获取歌单的歌曲
const payLoad1 = {
  id: id,
  pageName: '/playlist/track/all'
}

const store = useStore()
onBeforeMount(() => {
  store.dispatch('songList/getSongInfoList', payLoad)
  store.dispatch('songList/getSongInfoList', payLoad1)
})
const dataInfoList = computed(() => store.getters['songList/getDataInfoList'](payLoad.pageName))
const dataList = computed(() => store.getters['songList/getDataInfoList'](payLoad1.pageName))
</script>

<style scoped lang="less">
.song_list {
  width: 100%;
  height: 100%;
  overflow: scroll;
}
</style>
